<!-- 应用大厅 -->
<template>
	<el-card title="应用大厅">
		<!-- 查询条件栏 -->
		<div class="header-container">
			<div class="header-left">
				<zh-input class="search-input" placeholder="输入应用名称(模糊查询)" v-model="data.formData.appName">
					<template #prepend>
						<zh-button style="width: 41px" icon="ele-Search" @click="getAppArray"></zh-button>
					</template>
				</zh-input>
				<zh-button class="more-btn" @click="drawer = true"> 更多查询 </zh-button>
			</div>
			<div class="header-right">
				<div class="icon-input">
					<div :class="!data.isShow ? 'Btn1' : 'Btn'" @click="showModeChange(false)">
						<el-icon size="30px">
							<ele-Menu />
						</el-icon>
					</div>
					<!-- <div :class="data.isShow ? 'Btn1' : 'Btn'" @click="showModeChange(true)" v-func:appInfo0025> -->
					<div :class="data.isShow ? 'Btn1' : 'Btn'" @click="showModeChange(true)">
						<el-icon size="30px">
							<ele-Fold />
						</el-icon>
					</div>
					<zh-button style="width: 150px; margin-left: 10px" type="primary" @click="router.push('appRegister')">
						<el-icon> <ele-CirclePlusFilled /> </el-icon>应用注册申请
					</zh-button>
					<zh-button style="width: 150px; margin-left: 10px" type="primary" @click="goToMyPost">
						<el-icon> <ele-UserFilled /> </el-icon>我发起的
					</zh-button>
				</div>
			</div>
		</div>
		<!-- 侧边更多查询栏 -->
		<el-drawer v-model="drawer" title="更多查询" custom-class="demo-drawer">
			<zh-form :model="data.formData" ref="searchFormRef" style="margin-top: 20px; width: 90%" :span="24">
				<zh-form-select prop="appStatus" label="应用状态" placeholder="请选择" v-model="data.formData.appStatus" :options="data.dict.appStatusDict" />
				<zh-form-select prop="appBuilderLevel" label="应用层级" placeholder="请选择" v-model="data.formData.appBuilderLevel" :options="data.dict.appBuilderLevelDict" />
				<zh-form-select prop="appField" label="应用领域" placeholder="请选择" v-model="data.formData.appField" :options="data.dict.appFieldDict" />
				<zh-form-select prop="appType" label="应用类型" placeholder="请选择" v-model="data.formData.appType" :options="data.dict.appTypeDict" />
				<zh-form-query @queryClick="getAppArray(null, null, null)" :formRef="searchFormRef" :showAdvanced="false"></zh-form-query>
			</zh-form>
		</el-drawer>
		<a-tabs v-model:activeKey="data.activeKey" @change="handleTabsKey">
			<a-tab-pane :tab="tab.name" v-for="tab in data.tabArray" :key="tab.code">
				<!-- 查询结果栏(列表模式) -->
				<div v-show="data.isShow" class="table-container" v-loading="data.loading">
					<zh-table :height="data.tableHeight" :data="data.tableData" :columns="data.tableColumn" :radio-config="{ trigger: 'row' }" highlight-current-row>
						<el-table-column type="selection" width="55" />
						<template #appLevel_default="{ row }">
							<zh-badge :status="data.flagMap[Number(row.appBuilderLevel)].status" :text="data.flagMap[Number(row.appBuilderLevel)].text" class="badge" />
						</template>
						<template #appStatusFlag_default="{ row }">
							<a-tag color="#096DD9" v-if="row.appStatus == 0">
								{{ row.appStatusName }}
							</a-tag>
							<a-tag color="#FF8F4D" v-if="row.appStatus == 1">
								{{ row.appStatusName }}
							</a-tag>
							<a-tag color="#D1D1D1" v-if="row.appStatus == 2">
								{{ row.appStatusName }}
							</a-tag>
							<a-tag color="#2FB672" v-if="row.appStatus == 3">
								{{ row.appStatusName }}
							</a-tag>
							<a-tag color="#F65150" v-if="row.appStatus == 4">
								{{ row.appStatusName }}
							</a-tag>
							<a-tag color="#009EFF" v-if="row.appStatus == 5">
								{{ row.appStatusName }}
							</a-tag>
							<a-tag color="#88D04E" v-if="row.appStatus == 6">
								{{ row.appStatusName }}
							</a-tag>
						</template>
						<template #appControl_default="{ row }">
							<el-button link type="primary" size="small" @click="goToDetail(row.appId)"> 详情 </el-button>
							<!-- <el-button link type="primary" size="small" @click="goToShelf(row.appInfoId)">上架</el-button> -->
							<el-button link type="primary" size="small" @click="goToAppReleaseModel(row)">发布</el-button>
							<el-button link type="primary" size="small" @click="offShelf(row)">下架</el-button>
							<el-button link type="primary" size="small" @click="getKey(row.appId)">重新获取密匙</el-button>
							<el-button link type="primary" size="small">接口</el-button>
						</template>
						<template #appIcon_default="{ row }">
							<div class="tableAppNameBox">
								<el-avatar shape="square" :size="25" :src="row.appIcon" />
								<div class="tableAppName">{{ row.appName }}</div>
							</div>
						</template>
					</zh-table>
				</div>

				<!-- 查询结果栏(卡片模式) -->
				<div v-if="!data.isShow">
					<div v-loading="data.loading">
						<div class="card-grid">
							<div v-for="(item, index) in data.appArray" :key="index">
								<el-card :body-style="{ padding: '0px' }" shadow="hover">
									<div class="card-body">
										<div class="card-top">
											<div class="card-main">
												<div class="card-left">
													<div class="card-logo">
														<div>
															<el-avatar :size="45" shape="square" :src="item.appIcon" />
														</div>
													</div>
												</div>
												<div class="card-right">
													<div class="card-title">
														<span>{{ item.appName }}</span>
													</div>
													<div class="card-info">
														<span>{{ item.appDesc }}</span>
													</div>
												</div>
											</div>
											<el-tag class="ml-2" :color="item.appStatusColor" effect="dark">
												{{ item.appStatusName }}
											</el-tag>
										</div>
										<!-- 操作按钮组 -->
										<div class="card-bottom">
											<div class="card-bottom-btn">
												<div class="list-btn" @click="goToDetail(item.appId)">
													<span>详情</span>
												</div>
												<!-- <div class="list-btn" @click="goToShelf(item.appInfoId)">
                            <span>上架</span>
                          </div> -->
												<!-- <div class="list-btn" @click="goToAppReleaseModel(item)">
														<span>发布</span>
													</div>
													<div class="list-btn" @click="offShelf(item)">
														<span>下架</span>
													</div> -->
												<!-- 更多操作 -->
												<!-- <div class="list-btn">
														<el-popover placement="top-start" :width="320" trigger="click">
															<template #reference>
																<el-icon size="20px">
																	<ele-MoreFilled />
																</el-icon>
															</template>
															<div class="ohterBtn1">
																<div class="list-btn1" @click="getKey(item.appId)">
																	<span>重新获取密匙</span>
																</div>
																<div class="list-btn1">
																	<span>接口</span>
																</div>
															</div>
														</el-popover>
													</div> -->
											</div>
										</div>
									</div>
								</el-card>
							</div>
						</div>
					</div>
					<div class="pagination-block">
						<el-pagination background v-model:currentPage="data.pageParams.pageNum" v-model:page-size="data.pageParams.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
					</div>
				</div>
			</a-tab-pane>
		</a-tabs>
	</el-card>
</template>
<script lang="ts" setup name="appHall">
import { ElDrawer } from 'element-plus';
import store from '@/store/pinia';
import { FormInstance, ElMessage, ElMessageBox } from 'element-plus';
// ------------------接收传入参数(组件)-------------------
const searchFormRef = ref<FormInstance>();
const router = useRouter();

// ------------------初始化------------------------------
onMounted(() => {
	initRow();
	getDict();
});
// 应用总数（计算属性）
const total = computed(() => {
	return Number(data.pageParams.total);
});

// ------------------内部变量定义-------------------------
// 更多信息开关
const drawer = ref(false);
// 主数据对象
const data = reactive({
	activeKey: '1', //初始化默认为全部应用
	//应用
	tabArray: [
		{ name: '全部应用', code: '1', integrationCode: 'appInfo0001' },
		{ name: '我的应用', code: '2', integrationCode: 'appInfo0017' },
	],
	// 应用信息
	appArray: [
		{
			appId: '',
			appInfoId: '',
			appName: '',
			appBuilderLevelName: '',
			orgName: '',
			authStatus: '0',
			appDesc: '',
			appStatusColor: '',
			appStatusName: '',
			appStatus: '',
			appIcon: '',
		},
	],
	// 表头
	tableColumn: [
		{
			type: 'checkbox',
			width: 40,
			fixed: 'left',
		},
		{
			type: 'seq',
			title: '序号',
			width: 80,
			fixed: 'left',
			align: 'center',
		},
		{
			field: 'appInfoId',
			title: '主键',
			visible: false,
			align: 'center',
			width: 80,
		},
		{
			field: 'appName',
			title: '应用名称',
			align: 'center',
			minWidth: 100,
			slots: {
				default: 'appIcon_default',
			},
		},
		{
			field: 'appBuilderLevelName',
			title: '建设层级',
			align: 'center',
			minWidth: 100,
			slots: {
				default: 'appLevel_default',
			},
			filters: [
				{ label: '县级', value: 0 },
				{ label: '地级', value: 1 },
				{ label: '省级', value: 2 },
			],
			filterMultiple: false,
		},
		{ field: 'builderName', title: '建设单位', align: 'center', minWidth: 150 },
		{
			field: 'appStatusName',
			title: '应用状态',
			align: 'center',
			minWidth: 100,
			slots: {
				default: 'appStatusFlag_default',
			},
		},
		{
			field: 'roleTypeName',
			title: '操作',
			align: 'center',
			minWidth: 160,
			slots: {
				default: 'appControl_default',
			},
		},
	],
	// 分页参数
	pageParams: {
		pageNum: 1,
		pageSize: 6,
		total: 6,
	},
	// 应用列表展示模式标记
	isShow: false,
	// 加载状态标记
	loading: true,
	// 建设层级点状修饰数据对象
	flagMap: {
		0: {
			status: 'processing',
			text: '',
		},
		1: {
			status: 'success',
			text: '',
		},
		2: {
			status: 'error',
			text: '',
		},
	},
	// 表格数据定义
	tableData: [],
	// 查询表单对象
	formData: {
		appName: '',
		appStatus: '',
		appBuilderLevel: '',
		appField: '',
		appType: '',
	},
	// 数据字典对象
	dict: {
		// 应用状态字典
		appStatusDict: [],
		// 应用建设层级字典
		appBuilderLevelDict: [],
		// 应用领域字典
		appFieldDict: [],
		// 应用类型字典
		appTypeDict: [],
	},
	// 侧边栏显示标记
	showDrawer: false,
	// 发起的应用信息数据
	// MyPostData: [] as any,
	// 表格高度
	tableHeight: 460,
});

// ------------------定义调用方法-------------------------
// 初始化卡片展示行数
const initRow = () => {
	// 浏览器的视口高度
	const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

	data.tableHeight = height - 250;

	// 卡片展示行数(默认2行)
	let rows = 2 as number;
	// 实际展示行数(单卡片高230，底部外边距40，共270)
	rows = (height / 270) | 0;
	// 实际单页展示卡片数(默认每行仅展示3个)
	data.pageParams.pageSize = (3 * rows) as number;
	// 获取页面数据
	getAppArray(data.pageParams.pageSize, 1, null);
};

//跳转到我发起的页面
const goToMyPost = () => {
	router.push('appLog');
};
//切换我的应用、全部应用
const handleTabsKey = () => {
	getAppArray(data.pageParams.pageSize, 1, null);
};
// 获取应用列表信息
const getAppArray = (pageSize: any, pageNum: any, funcCode: any) => {
	// 开启加载中状态
	data.loading = true;
	let params = {
		appName: data.formData.appName || null,
		appStatus: data.formData.appStatus || null,
		appBuilderLevel: data.formData.appBuilderLevel || null,
		appField: data.formData.appField || null,
		appType: data.formData.appType || null,
	} as any;
	if (!data.isShow) {
		params.pageSize = pageSize || data.pageParams.pageSize;
		params.pageNum = pageNum || data.pageParams.pageNum;
	}

	let integrationCode = '' as string;
	data.tabArray.forEach((item) => {
		if (item.code == data.activeKey) {
			integrationCode = item.integrationCode;
		}
	});
	if (!integrationCode) {
		return;
	}
	if (funcCode) {
		integrationCode = funcCode;
	}
	$api.common.send.post(integrationCode, params).then((res: any) => {
		data.pageParams.total = res.result.total;
		let tempArray = res.result.list;
		for (const item of tempArray) {
			// 组装完整icon地址
			item.appIcon = $api.common.fileShowUrl.url + item.appIcon;
			// 设置建设层级字典对象
			data.flagMap[Number(item.appBuilderLevel)].text = item.appBuilderLevelName;

			// 设置应用状态颜色
			switch (item.appStatus) {
				case '0':
					item.appStatusColor = '#096DD9';
					break;
				case '1':
					item.appStatusColor = '#FF8F4D';
					break;
				case '2':
					item.appStatusColor = '#D1D1D1';
					break;
				case '3':
					item.appStatusColor = '#2FB672';
					break;
				case '4':
					item.appStatusColor = '#F65150';
					break;
				case '5':
					item.appStatusColor = '#009EFF';
			}
		}
		data.appArray = tempArray;
		data.tableData = tempArray;
		// 关闭加载中状态
		data.loading = false;
		// 关闭侧边栏抽屉
		drawer.value = false;
	});
};
// 查询数据字典信息
const getDict = () => {
	let params = {
		dictFields: 'APPSTATUS,APPBUILDERLEVEL,APPTYPE,APPFIELD',
	};
	$api.common.getBatchDict.post(params).then((res: any) => {
		data.dict.appStatusDict = res.result.APPSTATUS;
		data.dict.appBuilderLevelDict = res.result.APPBUILDERLEVEL;
		data.dict.appFieldDict = res.result.APPFIELD;
		data.dict.appTypeDict = res.result.APPTYPE;
	});
};
// 当前页码改变的回调（卡片模式）
const handleCurrentChange = (pageNum: number) => {
	data.pageParams.pageNum = pageNum;
	getAppArray(data.pageParams.pageSize, pageNum, null);
};
// 应用展示模式切换
const showModeChange = (type: boolean) => {
	data.isShow = type;
	if (type) {
		const state: any = store.state;
		if (state._rawValue.userStore.systemPrivileges.length === 0 || state._rawValue.userStore.systemPrivileges[0] != 'SUPERADMIN') {
			data.tabArray.shift();
			data.activeKey = '2';
			getAppArray(null, null, 'appInfo0017');
			return;
		}
		getAppArray(null, null, 'appInfo0025');
	} else {
		data.activeKey = '1';
		data.tabArray = [
			{ name: '全部应用', code: '1', integrationCode: 'appInfo0001' },
			{ name: '我的应用', code: '2', integrationCode: 'appInfo0017' },
		];
		getAppArray(null, null, null);
	}
};
// 跳转至应用档案页
const goToDetail = (appId: string) => {
	router.push({ path: '/appManage/appInfo', query: { appId: appId } });
};

// 跳转至上架申请页
// const goToShelf = (appInfoId: string) => {
//   router.push({
//     path: '/appManage/appRelease',
//     query: {
//       appInfoId: appInfoId,
//     },
//   });
// };

// 下架按钮方法
const offShelf = (item: any) => {
	ElMessageBox.confirm('是否确定下架?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			let params = item;
			$api.common.send.post('app_release20009', params).then(() => {
				// 信息提示
				ElMessage({
					type: 'success',
					message: '下架成功',
				});
				initRow();
				getDict();
			});
		})
		.catch(() => {});
};
//跳转应用发布
const goToAppReleaseModel = (item: any) => {
	router.push({
		path: '/appManage/equipment',
		query: item,
	});
};
// 获取密匙
const getKey = (appId: string) => {
	let params = {
		appId: appId,
	};
	$api.common.send.post('application0007', params).then(() => {
		$messageBox.success('获取成功！在应用详情内可查看', '提示');
	});
};
</script>
<style lang="scss" scoped>
.header-container {
	display: flex;
	justify-content: space-between;
	margin: 20px;
}
.search-input {
	width: 240px;
	height: 35px;
}
.more-btn {
	margin-bottom: 7px;
	margin-left: 10px;
}
.inputstyle {
	display: flex;
	justify-content: center;
	padding: 5px;
	width: 240px;
}
.api-name {
	color: black;
	display: flex;
	justify-content: flex-end;
	padding: 5px;
	width: 100px;
}
.header-right {
	display: flex;
	justify-content: center;
}
.icon-input {
	margin-top: 6px;
	margin-left: 2px;
	display: flex;
	justify-content: space-between;
}
.Btn {
	margin: 3px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #ccc;
	cursor: pointer;
}
.Btn1 {
	margin: 3px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	color: #1890ff;
}
.myrow {
	justify-content: center;
}
.badge {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-left: 72px;
	text-align: center;
}
:deep.badge .ant-badge-status-dot {
	margin-top: 9px !important;
}
.table-container {
	margin: 0px 20px;
}
.card-grid {
	/* 声明一个容器 */
	display: grid;
	/* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
	grid-template-columns: repeat(3, 30%);
	/* 声明行间距和列间距 */
	grid-gap: 40px;
	justify-content: space-between;
	margin: 0px 20px;
}
.pagination-block {
	display: flex;
	justify-content: flex-end;
	margin-top: 30px;
	margin-right: 10px;
}
.card-body {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.card-top {
	display: flex;
	width: 100%;
	justify-content: space-between;
	height: 160px;
}
.card-main {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.card-left {
	margin: 5px;
}
.card-logo {
	margin: 20px;
}

.card-title {
	margin-top: 25px;
}

.card-title span {
	display: block;
	font-size: 16px;
	color: black;
	width: 110%;
}

.card-info {
	height: 60px;
	margin-bottom: 20px;
	color: #8a8b8c;
}
.card-info span {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.card-bottom {
	display: flex;
	background-color: var(--el-fill-color-blank);
	width: 100%;
	height: 48px;
	justify-content: center;
	flex-direction: column;
	align-content: center;
}
.card-bottom-btn {
	display: flex;
	justify-content: space-evenly;
}
.list-btn {
	color: #8a8b8c;
}
.list-btn:hover {
	cursor: pointer;
	color: #096dd9;
}
.ml-2 {
	margin: 20px;
	font-size: 14px;
	border: 0px;
}
.ohterBtn {
	font-size: 5px;
}
.ohterBtn1 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.list-btn1 {
	margin: 2px;
	width: 90%;
	text-align: center;
	padding: 4px;
	color: #8a8b8c;
}
.list-btn1:hover {
	cursor: pointer;
	color: #096dd9;
}
.drawer_footer {
	margin: 20px;
	display: flex;
	justify-content: flex-end;
}

:deep .el-avatar {
	background-color: unset;
}

.tableAppNameBox {
	display: flex;
	justify-content: center;
}
.tableAppName {
	padding-top: 5px;
	margin-left: 5px;
}
// .MyPostMain {
// 	background-color: white;
// 	margin-bottom: 10px;
// 	margin-left: 150px;
// 	margin-right: 150px;
// }
// .MyPostMain:hover {
//   box-shadow: 7px 4px 10px;
// }
// .MyPostInfo {
// 	display: flex;
// 	justify-content: space-around;
// }
// .MyPost-Left {
// 	width: 75%;
// }
// :deep .el-dialog {
// 	background-color: #f5f8fe !important;
// }
:deep.ant-alert-info {
	margin: 0px 20px;
	border: 0px;
	background-color: #ebf7ff;
}
.infoSpan {
	color: #1890ff;
	padding-left: 10px;
}
:deep.ant-tabs > .ant-tabs-nav {
	margin-left: 22px;
	margin-right: 22px;
}
:deep .table-container {
	margin-top: 0px;
}
// .MyPostInfoTitle {
// 	color: #209eff;
// 	width: 300px;
// }
// :deep .el-descriptions__label {
// 	color: #000000;
// }
</style>
